<template>
    <div style="border: 1px solid #ccc;width:100%">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 400px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
        @onChange="handleChange"
      />
    </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted,nextTick } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor'

const props = defineProps({
    modelValue:''
})

const emit = defineEmits(['update:modelValue',''])

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('')
const mode = ref('simple')

// 模拟 ajax 异步获取内容
onMounted(async () => {
    await nextTick()
    valueHtml.value = props.modelValue

   // const editor = editorRef.value
    //console.log("查看所有支持菜单：",editor.getAllMenuKeys())
})

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const toolbarConfig = ref({
  toolbarKeys:[
    'bold', 
    "underline",
    'italic',
    'fontSize',
    "fontFamily",
    "through",
    "clearStyle",
    "color",
    "bgColor",
    "indent",
    "delIndent",
    "justifyLeft",
    "justifyRight",
    "justifyCenter",
    "justifyJustify",
    "lineHeight",
    //"insertImage"
  ]
})
const editorConfig = ref({ placeholder: '请输入内容...' })

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  
}

const handleChange = (editor)=>{
    emit('update:modelValue',valueHtml.value)
}
</script>